<template>
  <div class="project">
    <div class="projectTitle">
      <el-icon><GoldMedal /></el-icon>
      实战项目——共{{total}}篇
    </div>
    <template v-for="item in projectList" :key="item.id">
      <el-col  :span="24">
        <el-card shadow="hover" style="background-color: none !important;">
          <div class="header">
            <div class="title">
              <img :src="item.img_url" alt="">
              <h2 class="name">{{item.title}}</h2>
            </div>
          </div>
          <div class="projectLink">
            <a :href="item.project_url"><el-button style="right:0; font-size: 13px;" text type="primary"><el-icon><Link /></el-icon>项目链接</el-button></a>
          </div>
          
          <el-collapse accordion>
            <el-collapse-item name="1">
              <template #title>
                <el-icon >
                  <EditPen />
                </el-icon>详情:
              </template>
              <div>
                {{item.content}}
              </div>
            </el-collapse-item>
          </el-collapse> 
        </el-card>
      </el-col>
    </template>
    

  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import useProjectStore from "@/store/blog/project";

const useProject = useProjectStore()
useProject.getProjectListAction()

const { projectList, total } = storeToRefs(useProject)
</script>

<style scoped lang="less">
.el-col {
  margin-bottom: 5px;
}
.project {
  box-shadow: 0 0 6px rgba(0,0,0,.2);
  margin-bottom: 20px;
  .projectTitle {
    padding: 20px;
    background-color: #fff;
    color: #909399;
    font-size: 14px;
    display: flex;
    align-items: center;
  }
  .header {
    height: 200px;
    font-size: 14px;
    text-align: center;
    line-height: 200px;
    color: #fff;
    overflow: hidden;
    .title {
      border-radius: 5px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      
      .name {
        position: absolute;
        width: 100%;
        font-size: 50px;
        font-family: Microsoft YaHei;
        transition: backdrop-filter 500ms ease;
        transition: letter-spacing 500ms ease;
        &:hover {
          letter-spacing: 0.5em;
          backdrop-filter: blur(20px);
          color: #fff;
          box-shadow: 0 0 10px 10px rgba(0, 0, 0, .3);
        }
        
      }
      img {
        width: 100%;
        height: auto;
      }
      
    }
  }
  .projectLink {
    display: flex;
    justify-content: flex-end;
  }
}

</style>
